<template>
    <div class="home" style="margin-top: 0px;">
        <swiper/>
        <div class="section" v-for="(item, index) in songsList" :key="index">
            <!-- 标题 -->
            <div class="section-title">{{item.name}}</div>
            <!-- 内容 -->
            <content-list :contentList="item.list"/>
        </div>
    </div>
</template>

<script>
import Swiper from "@/components/Swiper";
import {getAllSinger, getAllSongList} from "../api/index";
import ContentList from "@/components/ContentList";

export default {
    name: "Home",
    components: {
        ContentList,
        Swiper
    },
    data(){
        return{
            songsList : [
                {name: '歌单', list: {}},
                {name: '歌手', list: {}},
            ]
        }
    },
    created(){
        this.getSongList();
        this.getSinger();
    },
    methods:{
        //获取前十条歌单
        getSongList(){
            getAllSongList().then((res) => {
                //显示获取的前10个歌单
                this.songsList[0].list = res.slice(0, 10);
            }).catch((err) =>{
               console.log(err);
            });
        },
        //获取前十名歌手
        getSinger(){
            getAllSinger().then((res) => {
                //显示获取的前10名歌手
                this.songsList[1].list = res.slice(0, 10);
            }).catch((err) =>{
                console.log(err);
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/home.scss";
</style>